<template>
  <div class="money-index">
    <div class="top">
      <div class="money-card card1">
        <div class="title">我的语点</div>
        <div class="money">{{wallet.normal}}</div>
        <div class="btn-group">
          <button @click="goRecharge">在线充值</button>
        </div>
      </div>
      <div class="money-card card2">
        <div class="title">我的钻石语点</div>
        <div class="money">{{wallet.diamond}}</div>
        <div class="btn-group">
          <button @click="goTrade">语点交易</button>
        </div>
      </div>
      <div class="money-card card3">
        <div class="title">可提现钻石语点</div>
        <div class="money">{{wallet.valid}}</div>
        <div class="btn-group">
          <button @click="goWithdraw">立即提现</button>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="head clearfix">
        <span>收支明细</span>
        <a href="#/personal/money/more" >更多》</a>
      </div>
      <ul>
        <money-item :value="item" v-for="item,i in deal_record" :key="i"></money-item>
      </ul>
    </div>
  </div>
</template>

<script>
  import { getWallet } from 'api/user'
  import MoneyItem from './../moneyItem.vue'
  export default {
    name: 'Listen',
    components: {
      MoneyItem
    },
    data() {
      return {
        name: this.$route.name,
        wallet: {},
        deal_record: []
      }
    },
    created() {
      this.$store.dispatch('GetMoney')
      .then(res => {
        this.wallet = res.wallet
        this.deal_record = res.deal_record
      })
      .catch(err => console.log(err))
    },
    methods: {
      goRecharge() {
        this.$router.push('/recharge')
      },
      goTrade() {
        this.$router.push('/mall/trade')
      },
      goWithdraw() {
        this.$router.push('/withdraw')
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.money-index{
  .top{
    display: flex;
    justify-content: space-between;
    .money-card{
      width: 275px;
      height: 150px;
      border-radius: 2px;
      .title{
        padding: 0 20px;
        color: #fff;
        height: 35px;
        line-height: 35px;
      }
      .money{
        padding: 0 20px;
        color: #fff;
        font-size: 30px;
        height: 35px;
        line-height: 35px;
      }
      .btn-group{
        line-height: 80px;
        text-align: center;
        >button{
          width: 120px;
          height: 30px;
          line-height: 1.5;
          background-color: #fff;
          border-radius: 15px;
        }
      }
    }
    .card1{background-color: #46B7AF;button{color: #46B7AF;}}
    .card2{background-color: #F8CB00;button{color: #F8CB00;}}
    .card3{background-color: #64C1E0;button{color: #64C1E0;}}
  }
  .bottom{
    .head{
      line-height: 50px;
      border-bottom: 1px solid #e5e6e7;
      >span{
        font-size: 14px;
        float: left;
      }
      >a{
        font-size: 12px;
        float: right;
        color: #999;
      }
    }
  }
}
</style>